<template>
  <div
    :class="['card-frame',{'card-frame-active': active}]"
    @click="$emit('click',data,$event)"
    @dblclick="$emit('dblclick',data,$event)"
    @contextmenu.prevent="$emit('rightClick',data,$event)"
  >
    <Icon class="card-icon" :data="data" />
    <span :class="['card-title',{'card-title-active': active}]">
      {{ data.name }}
    </span>
  </div>
</template>

<script>
export default {
  name: 'CardVertical',
  components: {
    Icon: () => import('@components/Icon.vue')
  },
  props: {
    data: {
      type: Object,
      default: null
    },
    active: {
      type: Boolean,
      defaule: false
    }
  },
  data() {
    return {}
  }
}
</script>

<style scoped>
.card-frame{
  display:flex;
  flex-flow: column nowrap;
  justify-content: center;
}
.card-icon{
  margin: 10%;
  background:transparent;
}
.card-title{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
